<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="renderer" content="webkit">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>建新街道移动办公 - E事通</title>
	    <link rel="stylesheet" href="/app/static/layui/css/layui.css">
	    <link rel="stylesheet" href="/app/static/styles/style.css">
	    <link rel="icon" href="image/code.png">
	    <script src="/app/static/scripts/jquery-1.9.1.js"></script>
	    <script type="text/javascript" src="/app/static//layui/layui.all.js"></script>
		<script type="text/javascript" src="/app/static/scripts/index.js"></script>
	</head>

	<body class="body">
		
		<div class="section">
			<div class="wrapper-md">
	       		<h1 class="fl" id="title">分类管理</h1>
	       		<div class="fr">
	       			<div class="def-btn-group">
	       				<button class="def-btn def-btn-primary" onclick="addNew()"><i class="gopng gopng_page"></i> 添加</button>
	       				<button class="def-btn def-btn-warm"><i class="gopng gopng_delete"></i> 删除</button>
	       			</div>
	       		</div>
	        </div>

			<div class="section-content">
				<div class="layui-form filterDiv">
					<div class="layui-inline">
						<label for="">分类名称：</label>
						<div class="layui-input-inline">
						    <input type="text" class="layui-input" />
				      	</div>
					</div>
					<button class="def-btn def-btn-normal ml20"><i class="gopng gopng_search"></i> 查询</button>
				</div>
				<div class="layui-form">
					<table class="layui-table table-center table-blue" >
						<colgroup>
							<col width="50" />
							<col width="50" />
						</colgroup>
						<thead>
							<tr>
								<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
								<th>排序</th>
								<th>分类名称</th>
								<th>图标</th>
								<th>修改人</th>
								<th>修改时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td><input type="checkbox" name="" lay-skin="primary"></td>
								<td>1</td>
								<td>党群</td>
								<td></td>
								<td>王娜</td>
								<td>2016-11-30 15:03 </td>
								<td>
									<div class="def-breadcrumb">
										<span onclick="edit()">编辑</span>
										<span onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
							<tr>
								<td><input type="checkbox" name="" lay-skin="primary"></td>
								<td>2</td>
								<td>民政局</td>
								<td></td>
								<td>王娜</td>
								<td>2016-11-30 15:03 </td>
								<td>
									<div class="def-breadcrumb">
										<span onclick="edit()">编辑</span>
										<span onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
							<tr>
								<td><input type="checkbox" name="" lay-skin="primary"></td>
								<td>3</td>
								<td>残联</td>
								<td></td>
								<td>王娜</td>
								<td>2016-11-30 15:03 </td>
								<td>
									<div class="def-breadcrumb">
										<span onclick="edit()">编辑</span>
										<span onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
							<tr>
								<td><input type="checkbox" name="" lay-skin="primary"></td>
								<td>4</td>
								<td>人社</td>
								<td></td>
								<td>王娜</td>
								<td>2016-11-30 15:03 </td>
								<td>
									<div class="def-breadcrumb">
										<span onclick="edit()">编辑</span>
										<span onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					
					<div class="text-right">
						<div id="page"></div>
					</div>
				</div>
			</div>
		</div>


		
		<!--新增弹框-->
		<script type="text/template" id="addNew_modal">
			<div class="modal_content modal_label_width">
				<form class="layui-form">
					<div class="layui-form-item">
				        <label class="layui-form-label">分类名称</label>
				        <div class="layui-input-block">
				            <input type="text" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">目录代码</label>
				        <div class="layui-input-block">
					        <input type="number" readonly="readonly" disabled="disabled" style="width: 50px;float: left;margin-right: 5px;background-color: #ddd;" class="layui-input">
					        <input type="number" lay-verify="required"  style="width: 100px;float: left;" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">图标</label>
			            <div class="layui-input-block">
							<div class="el-imgupload">
								<img src="" alt="" />
							</div>
						</div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">排序</label>
				        <div class="layui-input-block">
				            <input type="number" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
					    <label class="layui-form-label">状态</label>
					    <div class="layui-input-block">
					      	<select name="" lay-verify="required">
					        	<option value="0">已启用</option>
					        	<option value="1">未启用</option>
					      	</select>
					    </div>
					</div>
				</form>
			</div>
		</script>
		<!--/ 新增弹框-->
		
		<!--编辑弹框-->
		<script type="text/template" id="edit_modal">
			<div class="modal_content modal_label_width">
				<form class="layui-form">
					<div class="layui-form-item">
				        <label class="layui-form-label">分类名称</label>
				        <div class="layui-input-block">
				            <input type="text" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">目录代码</label>
				        <div class="layui-input-block">
					        <input type="number" readonly="readonly" disabled="disabled" style="width: 50px;float: left;margin-right: 5px;background-color: #ddd;" class="layui-input">
					        <input type="number" lay-verify="required"  style="width: 100px;float: left;" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">图标</label>
			            <div class="layui-input-block">
							<div class="el-imgupload">
								<img src="" alt="" />
							</div>
						</div>
			        </div>
			        <div class="layui-form-item">
				        <label class="layui-form-label">排序</label>
				        <div class="layui-input-block">
				            <input type="number" lay-verify="required" class="layui-input">
				        </div>
			        </div>
			        <div class="layui-form-item">
					    <label class="layui-form-label">状态</label>
					    <div class="layui-input-block">
					      	<select name="" lay-verify="required">
					        	<option value="0">已启用</option>
					        	<option value="1">未启用</option>
					      	</select>
					    </div>
					</div>
				</form>
			</div>
		</script>
		<!--/ 编辑弹框-->

		<script type="text/javascript">
			
			var form = layui.form,
				layer = layui.layer,
				laypage = layui.laypage,
				layedit = layui.layedit,
				laydate = layui.laydate,
				layer = layui.layer,
				upload = layui.upload;
				
				form.render()
				
				laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
					,count: 50 //数据总数，从服务端得到
				    ,skin: '#1E9FFF'
				    ,skip: true
				});
				
			
			//删除
			function remove(){
				layer.confirm('您确定要删除吗？', {
					btn: ['删除', '取消'] //按钮
				}, function() {
					layer.msg('删除', {
						icon: 1
					});
				}, function() {
					layer.msg('取消', {
						icon: 2
					});
				});
			}
			

			function uploadImg(suc){
				upload.render({
					elem: '.el-imgupload',
					url: '/api/upload/',
					done:function(res, index, upload){
						if(suc&&typeof suc == 'function'){
							suc(res,index, upload)
						}
					}
				});
			}




			
			//新增
			function addNew(){
				layer.open({
					type: 1,
					skin: 'layui-layer-demo', //样式类名
					anim: 2,
					title: '添加分类',
					closeBtn: 1, //不显示关闭按钮
					shadeClose: false, //开启遮罩关闭
					area: ['500px', '520px'],
					btn: ['确定'],
					yes: function(index, layero) { //按钮【按钮一】的回调
						alert('点击了确定')
						layer.close(index)		//关闭方法
					},
					content: $('#addNew_modal').html(),
					success:function(ele){
						form.render();
						uploadImg(function(){
							
						})
					}
				})
			}
			
			
			//修改
			function edit(){
				layer.open({
					type: 1,
					skin: 'layui-layer-demo', //样式类名
					anim: 2,
					title: '修改分类',
					closeBtn: 1, //不显示关闭按钮
					shadeClose: false, //开启遮罩关闭
					area: ['500px', '520px'],
					btn: ['确定'],
					yes: function(index, layero) { //按钮【按钮一】的回调
						alert('点击了确定')
						layer.close(index)		//关闭方法
					},
					content: $('#edit_modal').html(),
					success:function(){
						form.render();
						uploadImg(function(){
							
						})
					}
				})
			}

		</script>
	</body>
</html>